<template>
	<detailbox title="批准" @leftclick="close">
	  <div slot="right" class="flex_item flex_between">
		<div></div>
		<div class="">
		  <el-button type="primary" size="small" @click="submit()">提交</el-button>
		  <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
		</div>
	  </div>
	  <el-form size="small" ref="form" :model="form">
		<el-row class="mt10" v-for="(item, index) in form.detailList" :key="index">
		  <el-col :span="16">
			<basic-container>
			  <div class="main_title success_f flex_between">
				<b>
				  管理信息
				  <span v-if="form.detailList.length > 1">({{ index + 1 }})</span>
				</b>
			  </div>
			  <el-divider></el-divider>
			  <div class="mb20">
				<span class="index_num success_bg">1</span>
				<b class="f14">基本信息</b>
			  </div>
			  <procss-work :item="item"></procss-work>
			  <check-file :detail="item"></check-file>
			</basic-container>
		  </el-col>
		  <el-col :span="8">
			<basic-container>
			  <div class="main_title"><b>批准操作</b></div>
			  <el-divider></el-divider>
			  <el-form-item
				label="批准结论："
				:prop="`detailList.${index}.check`"
				:rules="{
				  required: true,
				  message: '请选择审核结论',
				  trigger: 'blur',
				}"
			  >
				<el-select v-model="item.check" placeholder="请选择">
				  <el-option label="通过" value="1"></el-option>
				  <el-option label="不通过" value="2"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item
				label="不通过理由："
				v-if="item.check == '2'"
				:prop="`detailList.${index}.content`"
				:rules="{
				  required: true,
				  message: '请输入不通过理由',
				  trigger: 'blur',
				}"
			  >
				<el-input placeholder="请输入" v-model="item.content" style="width: 70%"></el-input>
			  </el-form-item>
			  <el-form-item
				v-if="item.check == '1'"
				label="文件安全："
				:prop="`detailList.${index}.isEncryption`"
				:rules="{
				  required: true,
				  message: '请选择文件安全',
				  trigger: 'blur',
				}"
			  >
				<el-select v-model="item.isEncryption" placeholder="请选择">
				  <el-option label="加密" value="1"></el-option>
				  <el-option label="不加密" value="0"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item
				label="私钥持有人："
				v-if="item.isEncryption == '1' && item.check == '1'"
				:prop="`detailList.${index}.privateKeyHolder`"
				:rules="{
				  required: true,
				  message: '请选择私钥持有人',
				  trigger: 'blur',
				}"
			  >
				<el-select v-model="item.privateKeyHolder" filterable placeholder="请选择输入">
				  <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item
				label="文件生效日期："
				v-if="item.check == '1'"
				:prop="`detailList.${index}.beginTime`"
				:rules="{
				  required: true,
				  message: '请选择文件生效日期',
				  trigger: 'blur',
				}"
			  >
				<el-date-picker v-model="item.beginTime" class="w160" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="默认当日"></el-date-picker>
			  </el-form-item>
			</basic-container>
		  </el-col>
		</el-row>
	  </el-form>
	  <el-row>
		<el-col :span="16"><showhistory ref="showhistory" :processStatus="processStatus" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory></el-col>
	  </el-row>
	  <steps ref="steps" @close="success()" :checkItem="form"></steps>
  
	  <check-process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum" :progressType="progressType"></check-process-record>
	</detailbox>
  </template>
  <script>
  import { getdealDetail, deal } from '@/api/myapi/tixiwenjian'
  import procssWork from './procss-work.vue'
  export default {
	props: {
	  progressType: '',
	  groupNumber: '',
	},
	components: {
	  procssWork,
	},
	data() {
	  return {
		processStatus: '',
		radio: '',
		nowdate: '',
		checked: false,
		showpreview: false,
		tableData: [],
		useTemp: false,
		shenheNum: 0,
		system: 'udiprocess',
		options: [],
		guifanFilesProcessRecordList: [],
		form: {
		  detailList: [],
		},
		Alluser: [],
	  }
	},
	mounted() {
	  this.getdealDetail()
	},
	methods: {
	  getdealDetail() {
		getdealDetail(
		  {
			groupNumber: this.groupNumber,
		  },
		  this.system
		).then(({ data }) => {
		  if (data.success) {
			this.form.detailList = [...data.data]
			this.processStatus = data.data[0].processStatus
			this.form.detailList.forEach((item) => {
			  this.$set(item, 'check', '')
			  this.$set(item, 'content', '')
			  this.$set(item, 'beginTime', '')
			  this.$set(item, 'isEncryption', '')
			  this.$set(item, 'privateKeyHolder', '')
			})
			this.guifanFilesProcessRecordList = data.data[0].processRecordList
			this.shenheNum = data.data[0].processRecordList.length
		  }
		})
	  },
	  close() {
		this.$emit('close')
	  },
	  success() {
		this.$emit('close')
		this.$emit('success')
	  },
	  submit() {
		this.$refs['form'].validate((valid) => {
		  if (valid) {
			let data = []
			for (let i = 0; i < this.form.detailList.length; i++) {
			  let item = this.form.detailList[i]
			  data.push({
				id: item.id,
				checkStatus: item.check || '0',
				type: this.progressType,
				content: item.content,
				privateKeyHolder: item.privateKeyHolder,
				isEncryption: item.isEncryption,
				beginTime: item.beginTime,
			  })
			}
			deal(
			  {
				processList: JSON.stringify(data),
			  },
			  this.system
			).then(({ data }) => {
			  if (data.success) {
				// this.$message.success('提交成功')
				this.nowdate = this.dateFormat(new Date())
				this.openDialg('steps')
			  }
			})
		  } else {
			return false
		  }
		})
	  },
	},
  }
  </script>
  
  <style lang="scss">
  .active {
	background-color: #e6f1fc !important;
	color: #126bc9;
  }
  
  .leftbox {
	border-right: 2px solid #f0f2f5;
  }
  </style>
  